<template>
  <div class="centreLeft1">
    <chart v-if="active == 0" />
    <chart1 v-if="active == 1" />
    <el-tooltip
      class="box-item"
      effect="dark"
      content="导入"
      placement="top-start"
    >
      <img class="importIcon" :src="importIcon" alt="" @click="handleImport" />
    </el-tooltip>
    <el-tooltip
      
      class="box-item"
      effect="dark"
      :content="active == 0?'流程图':'成绩分析'"
      placement="top-start"
    >
      <img class="switchIcon" :src="switchIcon" alt="" @click="handleChange" />
    </el-tooltip>
    <input hidden type="file" ref="importInput" @change="fileChange($event)">
  </div>
</template>

<script lang="ts">
import { defineComponent,  ref } from 'vue'
import Chart from './chart/index'
import Chart1 from './chart/flowIndex'
import { ElMessage } from "element-plus";
export default defineComponent({
  emits:['setTitle'],
  components: {
    Chart,
    Chart1
  },
  setup(props,context) {
    const hasLoad = ref(false)
    const importInput = ref(null)
    const switchIcon = require("@/assets/switch.png")
    const importIcon = require("@/assets/import.png")
    const active = ref(0)
    const handleChange = () => {
      if(active.value == 0){
        active.value = 1
        context.emit('setTitle','流程图')
      }else{
        active.value = 0
        context.emit('setTitle','成绩分析')
      }
    }

    const handleImport = () => {
      importInput.value.click()
    }

    const fileChange = (val:any) => {
      console.log(val.target.files);
      ElMessage.success(`上传成功!`);
      hasLoad.value = true
    }

    return{
      switchIcon,
      importIcon,
      active,
      hasLoad,
      handleChange,
      fileChange,
      handleImport,
      importInput
    }
  }
})
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
$box-width: 100%;
$box-height: 100%;
.centreLeft1 {
  padding: 20px;
  padding-top:60px;
  height: $box-height;
  width: $box-width;
  border-radius: 10px;
  position: relative;
}
.news {
  width: 100%;
  height: 230px;
  margin-top: 10px;
}
.switchIcon{
  width:18px;
  height:18px;
  position: absolute;
  top:5px;
  right: 45px;
  cursor: pointer;
}
.importIcon{
  width:18px;
  height:18px;
  position: absolute;
  top:5px;
  right: 20px;
  cursor: pointer;
}
</style>
